<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="title">
                    <img :src="props.url" alt="">
                    <div class="topic">
                        <slot name="title"></slot>  
                        <span class="ps">
                            <slot name="ps"></slot>
                        </span>
                    </div>
                </div>
                <div class="operate">
                    <el-input 
                    v-model="input" 
                    style="width: 240px" 
                    :prefix-icon="Search" 
                    :placeholder="props.placeholder" 
                    @keyup.enter="search"
                    clearable
                    v-if="props.placeholder"/>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="info" plain @click="reset">重置</el-button>
                </div>
            </el-header>
            <el-divider/>
            <el-main v-loading="loading">
                <slot name="main" v-if="props.item">
                    <IntroCard 
                    v-for="(item,index) in filteredItems" 
                    :key="index" 
                    :url="item.url" 
                    :type="cardType" 
                    :name="item.name" 
                    :gender="item.gender" 
                    :specialty="item.specialty"
                    :hospital="item.hospital_id"
                    :phone="item.phone"
                    :email="item.email"
                    :id="item.id">
                        <template v-slot:name>{{ item.name }}</template>
                        <template v-slot:positon>{{ item.position }}</template>
                    </IntroCard>
                </slot>
            </el-main>
            <el-divider/>
            <el-footer>
                <el-pagination 
                layout="prev, pager, next" 
                :total="filteredTotal" 
                :page-size="5" 
                v-model:current-page="currentPage"
                @current-change="handleCurrentChange"/>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, computed, watch, onMounted } from 'vue';
import { getDoctor, getDepartment } from '@/api/getInfo';
import IntroCard from '@/components/Card/IntroCard.vue';
import { ElMessage } from 'element-plus';

defineOptions({
    name: 'Intro'
})

let props = defineProps({
    url: { type: String },
    placeholder: { type: String },
    total: { type: Number },
    item: { type: Array, default: [] }
})
// 卡片展示的类型
const cardType = computed(()=>{
    if(props.placeholder==='请输入医生姓名') {
        return 'doctor'
    }
    if(props.placeholder === '请输入科室名称') {
        return 'department'
    }
})
// 加载动画
const loading = ref(true)
// 查询输入框
let input = ref(null)
// 当前页默认为1
let currentPage = ref(1)
// 每页显示5项
let pageSize = 5
// 总数据
let total_items = ref([])

// 过滤后的数据
const filteredItems = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    return total_items.value.slice(start, start + pageSize); // 根据当前页和每页条数获取数据
})

// 过滤后的总数
const filteredTotal = computed(() => {
    return total_items.value?.length; // 过滤后的医生总数
})

// 处理页面改变
function handleCurrentChange(page) {
    currentPage.value = page;
}

// 重置输入框和列表
function reset() {
    input.value = '';  // 清空输入框
    total_items.value = props.item; // 恢复为原始医生列表
    currentPage.value = 1; // 重置当前页
}

// 搜索
async function search() {
    loading.value = true    // 开始加载动画
    const data = {
        name: input.value // 获取输入
    }
    try {
        let response
        if(props.placeholder === '请输入医生姓名') {
            data.position = ["专家",'副院长','院长','主治医生']
            response = await getDoctor(data)
        }
        if(props.placeholder === '请输入科室名称') {
            data.isKey = 'Y'    // 是否专家
            response = await getDepartment(data)
        }
        if (response && response.data) {
            // 去重处理,避免重复的名字
            const uniqueItems = response.data.filter((item, index, self) =>
                index === self.findIndex((t) => t.name === item.name)
            )
            total_items.value = uniqueItems // 更新过滤后的列表
            currentPage.value = 1 // 重置当前页
        } else {
            // 避免重复弹窗,使用单例模式
            ElMessage.closeAll()
            ElMessage.error('查询失败')
        }
        loading.value = false   // 清除加载动画
    } catch (error) {
        console.error('查询时出错:', error)
    }
}

onMounted(()=>{
    search()
})

</script>

<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0
    }
    .common-layout {
        width: 100%;
        margin: 40px 0;

        .el-container {
            width: 100%;

            .el-header {
                width: 100%;
                height: auto;
                display: flex;
                justify-content: space-between;

                .title {
                    height: 30px;
                    display: flex;
                    align-items: center;

                    .topic {
                        display: flex;
                        align-items: flex-end;
                        margin: 0 10px;

                        .ps {
                            color: rgb(159.5, 206.5, 255);
                            font-size: 0.7rem;
                            margin: 0 10px;
                        }
                    }

                    img {
                        height: 100%;
                    }
                }

                .operate {
                    display: flex;

                    .el-input {
                        margin-right: 12px;
                    }

                    .el-button {
                        height: 32px;
                        width: 70px;
                        // margin: 0 10px;
                    }
                }
            }
            .el-main {
                width: 100%;
                display: flex;
                overflow: hidden;
            }
            .el-footer {
                display: flex;
                justify-content: end;
                height: auto;

                .el-pagination {
                    height: 30px;
                }
            }
            .el-divider {
                padding: 0;
            }
            .el-divider--horizontal {
                margin: 5px 0;
            }
        }
    }
</style>